let listCont=document.querySelector('.list-cont')//获取元素

//api按钮数据渲染函数
function apiData(){
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
      ]
    
    
    /* 
      需求 将apiTypeData中的name属性添加到a标签中
    */
    
    //定义盒子来存放渲染过来的a标签
    let apiHtml='';
    apiTypeData.forEach(function(v){
        //console.log(v);
        apiHtml+=`
            <a href="#" class="${v.isnew ? 'list-active' : ''}"  data-keyword="${v.keyword}">${v.name}</a>
        `
        //console.log(v.keyword);
    })
    //console.log(apiHtml);
    //将渲染好的a标签放到list-cont里面
    listCont.innerHTML=apiHtml;
}
apiData();

/* 
    需求 点击list-cont的a标签 将a标签的文本渲染到showSpan中
        并且a标签对应的keyword要渲染到input输入框中
*/
//获取元素
let showList=document.querySelector('.show-list');

//apl列表渲染函数
function listBox(){
    let showSpan=document.querySelector('#showSpan');
    let inpNav=document.querySelector('#inpNav');
//let listCont=document.querySelector('.list-cont');
//利用事件委派 给a标签的父级元素添加点击事件

listCont.addEventListener('click',function(e){
    if(e.target.nodeName === 'A'){
        showSpan.textContent=e.target.textContent

        //console.log(e.target.dataset.keyword)
        inpNav.placeholder=e.target.dataset.keyword
    };
})

//api列表盒子数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
  
  ]

//定义空盒子存放遍历出来的img
let listShow=''
//遍历listDataArr
listDataArr.forEach(function(v){
    //console.log(v);
    if(v.isSpecial){
        listShow+=`
        <li class="show-list-special">
            <a class="showText" href="../page/API-datai.html">
                <img src="../imgs/${v.img}">
                <p>${v.name}</p>
                <p class="show-price">${v.price}</p>
            </a>
            <button class="show-active">申请数据</button>
            <span>企业专用</span>
        </li>
    `
    }
    else{
        listShow+=`
        <li>
            <a class="showText" href="../page/API-datai.html">
                <img src="../imgs/${v.img}">
                <p>${v.name}</p>
                <p class="show-price">${v.price}</p>
            </a>
            <button class="show-active">申请数据</button>
        </li>
    `
    }
})
//console.log(listShow);
//将渲染好的元素放到show-list里面


showList.innerHTML=listShow
}
listBox();

/* 
    需求 点击申请数据按钮 显示模态框mask
        sub-box框失焦时 隐藏mask
        点击账号登录和扫码登录 切换板块
        当输入框开始输入内容时 显示del图标
*/
//let showActive=document.querySelectorAll('.show-active')
let mask=document.querySelector('.mask')
let showActive=document.querySelectorAll('.show-active')
let subBox=document.querySelector('.sub-box');
//console.log(subBox);

let idLogin=document.querySelector('#idLogin');
let mLogin=document.querySelector('#mLogin');
let idBox=document.querySelector('#idBox');
let mBox=document.querySelector('#mBox')
let loginLine=document.querySelector('#loginLine');

//注册点击事件
showActive.forEach(function(dom){
    dom.addEventListener('click',function(){
        mask.style.display='block';
        user.value=''
        pwd.value=''
        errorTips[0].style.display='none'
        errorTips[1].style.display='none'
    })
})


idLogin.addEventListener('click',function(){
    //清空idbox类名
    idBox.classList.remove('mask-active')
    idLogin.style.color='#00bdff'
    loginLine.style.left='20px'

    //给mbox添加类名

    mBox.classList.add('mask-active')
    mLogin.style.color='#222'
})
mLogin.addEventListener('click',function(){
    //清空mbox类名
    mBox.classList.remove('mask-active')
    loginLine.style.left='126px'
    mLogin.style.color='#00bdff'
    //给idbox添加类名

    idBox.classList.add('mask-active')
    idLogin.style.color='#222'
})

//注册输入框输入事件
//获取元素
let user=document.querySelector('#user')
let delIconOne=document.querySelector('.del-icon1')
let pwd=document.querySelector('#pwd')
let delIconTwo=document.querySelector('.del-icon2')

//获取元素
let userTips=document.querySelector('.user-tips')
let pwdTips=document.querySelector('.pwd-tips')

//用户名输入事件
user.addEventListener('input',function(){
    userTips.style.display='none'
    delIconOne.style.display='block';
    if(user.value === ''){
        delIconOne.style.display='none'
    }
})

//注册删除图标点击事件
delIconOne.addEventListener('click',function(){
    user.value=''
    delIconOne.style.display='none'
})

//密码输入事件
pwd.addEventListener('input',function(){
    pwdTips.style.display='none'
    delIconTwo.style.display='block'
    if(pwd.value === ''){
        delIconTwo.style.display='none'
    }
})

delIconTwo.addEventListener('click',function(){
    pwd.value=''
    delIconTwo.style.display='none'
})


/**
 * 3.需求 点击登录按钮时 进行表单验证
 */
//创建正则表达式来验证表单内容
let inputCheckArr = [
    nameExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/, //用户名 6-12位字母开头 可以又字母数字下划线
    pwdExp = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码  6-12位字母开头 可以又字母数字下划线
]
//获取元素
let errorTips = document.querySelectorAll('.error-tips')
let loginBtn=document.querySelector('#loginBtn')
let loginInput=document.querySelectorAll('.login-inp input')

loginBtn.addEventListener('click', function () {
    for (let i = 0; i < loginInput.length; i++) {
        let bool = inputCheckArr[i].test(loginInput[i].value)
        if (bool) {
            errorTips[i].style.display = 'none'
        } 
        else {
            errorTips[i].style.display = 'block'
            return //如果有一个输入错误则退出函数
        }
     } 
    location.href='../page/API-datai.html'
}) 
/* //注册用户名输入框失焦事件
user.addEventListener('blur',function(){
    let bool=userReg.test(user.value)


    if(!bool){
        userTips.style.display='block';
    }else{
        userTips.style.display='none';
    }

    
})

//注册密码输入框失焦事件
pwd.addEventListener('blur',function(){
    let bool=pwdReg.test(pwd.value)

    if(!bool){
        pwdTips.style.display='block';
    }else{
        pwdTips.style.display='none';
    }
}) */

mask.addEventListener('click',function(e){
    if(e.target.className === 'mask'){
        mask.style.display='none'
    };  
})

/**
 * 4.需求 输入框输入时 显示删除图标 点击删除图标清空表单内容
 */

 let userDelIcon=document.querySelector('.del-icon1')
 let pwdDelIcon=document.querySelector('.del-icon2')
 
 loginInput[0].addEventListener('input',function(){
     userDelIcon.style.display='block';
 })
 
 loginInput[1].addEventListener('input',function(){
     pwdDelIcon.style.display='block';
 })
 
 userDelIcon.addEventListener('click',function(){
     loginInput[0].value='';
     userDelIcon.style.display='none'
 })
 
 pwdDelIcon.addEventListener('click',function(){
     loginInput[1].value='';
     pwdDelIcon.style.display='none'
 })